<template>
  <view class="wrapper">
    <uni-card :is-shadow="false" is-full>
      <text class="uni-h6">当前月份：{{month}}</text>
    </uni-card>
    <view class="item" v-for="(item,i) in list" :key="i" @click="onClick(item)">
      <uni-card :title="item.day">
        <view class="flex">上午打卡时间: {{item.clockInRealTime || '--'}}
          <view class="ml-auto">
            {{amStatusMap[item.clockInStatus]}}
          </view>
        </view>
        <view class="flex">下午打卡时间: {{item.clockOutRealTime || '--'}}
          <view class="ml-auto">
            {{pmStatusMap[item.clockOutStatus]}}
          </view>
        </view>
      </uni-card>
    </view>
    <uni-drawer ref="drawer" mode="right" :width="320">
      <view class="draw-item">
        <view class="text">
          当前选择
        </view>
        <view class="uni-list-cell-db">
          <picker :range='range' :value='index' @change='onPickerChange'>
            <view class="uni-input">
              {{range[index]}}
            </view>
          </picker>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>

<script>
  import {
    getYMD
  } from '../../utils';
  import {
    getAllMonth,
    getSignList
  } from '../../utils/api';
  export default {
    data() {
      return {
        range: [],
        index: 0,
        list: [],
        amStatusMap: {
          0: '异常',
          1: '正常',
          2: '迟到',
          3: '已补卡'
        },
        pmStatusMap: {
          0: '早退打卡',
          1: '正常',
          2: '未打卡',
          3: '已补卡'
        }
      };
    },
    computed: {
      month() {
        if (this.range.length) {
          return this.range[this.index]
        }
        return getYMD(new Date()).slice(0, 7)
      }
    },
    onNavigationBarButtonTap() {
      this.$refs.drawer.open()
    },
    onPullDownRefresh() {
      this.getList()
    },

    onLoad() {
      this.getList()
      this.getMonth()
    },
    methods: {
      async getList() {
        const res = await getSignList({
          month: this.month
        })
        this.list = res
        uni.stopPullDownRefresh()
      },

      onClick(item) {
        uni.navigateTo({
          url: '/pages/signOn/signOn?day=' + item.day
        })
      },
      onPickerChange(e) {
        this.index = e.detail.value
        this.$refs.drawer.close()
        this.getList()
      },
      async getMonth() {
        const res = await getAllMonth()
        this.range = res.map((item, i) => {
          if (item.month === getYMD(new Date()).slice(0, 7)) {
            this.index = i
          }
          return item.month
        })
      },
    }
  }
</script>

<style lang="scss">
  .item {
    &+.item {
      margin-top: 20rpx;
    }
  }

  .uni-body {
    display: flex;
    flex-direction: column;
  }

  .draw-item {
    padding: 24rpx;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .uni-input {
    color: #929292;
  }
</style>